<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SDrag Test Page</title>
<link href="prettify.css" type="text/css" rel="stylesheet" />
<link href="css.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

<script src="../lib/simple.js"></script>
<script src="../plugins/SDrag.js"></script>
<script>

var apps = {
	'#drag1' : {
		instance : null,
		create : function () {
			if (this.instance == null)
				this.instance = new $.SDrag('#drag1');	
		}
	},
	'#drag2' : {
		instance : null,
		create : function () {
			if (this.instance == null)
				this.instance = new $.SDrag('#drag2');	
		}
	},
	'#drag3' : {
		instance : null,
		create : function () {
			if (this.instance == null)
				this.instance = new $.SDrag('#drag3', { axis : 'H', rangeX : [-100, 300], onDrag : function (pointer) {
					$('#drag3 .content').html('left:' + pointer.left);
				}
				});
		}
	}
};
function runApp (id) {
	apps[id].create();
	apps[id].instance.activate();
} 

function stopApp (id) {
	apps[id].create();
	apps[id].instance.disable();
}
</script>
<head>
<body>
<img src="../simple.png"/>
<h2><a name=ACKS></a>15. Acknowledgements</h2>

<p>The CSS working group would like to thank everyone who has sent
comments on this specification over the years.</p>

<p>The working group would like to extend special thanks to Donna
McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed
the final editorial review.</p>

<div id="drag1" style="margin:50px;width:100px;height:100px;border:1px solid #000;background:green">
	drag me!
	<a href="javascript:void(0)" onclick="runApp('#drag1')">run</a>
	<a href="javascript:void(0)" onclick="stopApp('#drag1')">stop</a>
</div>

<div id="drag2" style="margin:50px;width:150px;height:150px;border:1px solid #000;background:green">
	<div class="sdrag-hand" style="height:20px;background:blue">drag hand</div>
	drag me!
	<a href="javascript:void(0)" onclick="runApp('#drag2')">run</a>
	<a href="javascript:void(0)" onclick="stopApp('#drag2')">stop</a>
</div>

<div id="drag3" style="margin:50px;width:150px;height:150px;border:1px solid #000;background:green">
	<div class="sdrag-hand" style="height:20px;background:blue">drag hand</div>
	<span class="content">drag me!</span>
	<a href="javascript:void(0)" onclick="runApp('#drag3')">run</a>
	<a href="javascript:void(0)" onclick="stopApp('#drag3')">stop</a>
</div>
</body>
</html>